<template>
  <div class="sb">
      <ul>
          <router-link to="/details">
            <li v-for="(v,i) in this.$store.state.sort.fivearr" :key="i">
              <div class="sb-left">
                    <img :src="v.img" alt="">
              </div>
              <div class="sb-right">
                    <h1>{{v.title}}</h1>
                    <p>{{v.text}}</p>
                    <div class="sb-bottom">
                        <span><b>￥<i>{{v.price}}</i>.9</b>{{v.textb}}</span>
                        <a>
                            <img src="image/Sort/小购物车.png" alt="">
                        </a>
                    </div>
              </div>
            </li>
          </router-link>
      </ul>
  </div>
</template>

<script>
export default {
    data(){
        return{
            
        }
    }
}
</script>

<style scoped>
    i{
        font-style: normal;
    }
    .sb{
        width: 100%;
        height: 6.2rem;
        margin-top: 0.2rem;
        background-color: white;
        overflow-y: auto;
    }
    .sb>ul{
        width: 100%;
        height: 100%;
        /* background-color: darkcyan; */
    }
    .sb>ul>li:nth-child(1){
        margin-top: 0;
    }
    .sb>ul>a>li{
        width: 100%;
        height: 0.925rem;
        /* background-color: beige; */
        display: flex;
        margin-top: 0.1rem;
    }
    .sb-left{
        width: 30%;
        height: 100%;
        /* background-color: blueviolet; */
        display: flex;
        justify-content: center;
    }
    .sb-left>img{
        width: 0.85rem;
        height: 0.85rem;
    }
    .sb-right{
        width: 70%;
        height: 100%;
        /* background-color: white; */
    }
    .sb-right>h1{
        width: 2rem;
        font-size: 0.13rem;
        text-indent: 1em;
        margin-left: 0.1rem;
        color: black;
    }
    .sb-right>p{
        width: 2rem;
        margin-left: 0.1rem;
        font-size: 0.11rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #a8a8a8;
    }
    .sb-bottom{
        width: 100%;
        height: 46.6%;
        /* background-color: aquamarine; */
        position: relative;
        border-bottom: 1px solid #f1f1f1;
    }
    .sb-bottom>span>b>i{
        font-size: 0.135rem;
        color: #ec694d;
    }
    .sb-bottom>span{
        margin-top: 0.15rem;
        display: inline-block;
        font-size: 0.09rem;
        color: #a8a8a8;
        margin-left: 0.1rem;
    }
    .sb-bottom>span>b{
        color: #ec694d;
    }
    .sb-bottom>a{
        display: inline-block;
        width: 0.24rem;
        height: 0.24rem;
        background-color: #4caaff;
        border-radius: 50%;
        position: absolute;
        right: 10%;
        top: 22%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .sb-bottom>a>img{
        width: 0.135rem;
        height: 0.15rem;
    }
</style>